<template>
  <div class="area-modal">
    <el-dialog width="30%" v-model="dialogVisible" :before-close="handleClose">
      <template #header>
        <div class="my-header">
          <div>{{ state.title }}</div>
        </div>
      </template>
      <div class="scheme-box">
        <el-form
          ref="ruleFormRef"
          :model="addForm"
          :rules="rules"
          label-width="auto"
          class="demo-ruleForm"
          status-icon
        >
          <el-form-item label="区域名称" prop="calczName">
            <el-input class="formwidth" placeholder="请输入" v-model="addForm.calczName" />
          </el-form-item>
          <el-form-item label="区域说明" prop="calczDesc">
            <el-input
              class="formwidth"
              type="textarea"
              placeholder="请输入"
              v-model="addForm.calczDesc"
            />
          </el-form-item>
          <el-form-item label="输入预报断面" prop="startSec">
            <el-select v-model="addForm.startSec" multiple placeholder="请选择" filterable>
              <el-option
                :key="index"
                v-for="(item, index) in state.secList"
                :value="item.blkcd"
                :label="item.blknm"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="结束预报断面" prop="endSec">
            <el-select v-model="addForm.endSec" placeholder="请选择" filterable>
              <el-option
                :key="index"
                v-for="(item, index) in state.secList"
                :value="item.blkcd"
                :label="item.blknm"
              />
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="handleSave">确定</el-button>
          <el-button @click="handleClose()">取消</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, defineExpose } from 'vue'
import {
  addArea,
  getAreaSecList,
  // 查询详情
  getCalcZoneInfo,
  // 修改区域
  postModify
} from '@/services/modules/compute-methods'
import { getSectionTree } from '@/services/modules/model-config.js'
import { ElMessage, ElMessageBox } from 'element-plus'
const props = defineProps({
  watershedId: {
    type: Number,
    default: 1
  }
})
const ruleFormRef = ref(null)
onMounted(() => {})
const dialogVisible = ref(false)
const addForm = reactive({
  calczName: '',
  calczDesc: '',
  startSec: '',
  endSec: '',
  zoneId: 1
})
const state = reactive({
  secList: [],
  title: '新建区域'
})
const emit = defineEmits(['closeDialog'])
const closeDialog = () => {
  emit('closeDialog', false)
}
//验证
const rules = {
  calczName: [{ required: true, message: '请输入区域名称', trigger: 'blur' }],
  startSec: [{ required: true, message: '请选择输入预报断面', trigger: 'blur' }],
  endSec: [{ required: true, message: '请选择结束预报断面', trigger: 'blur' }]
}
//保存区域
function handleSave() {
  console.log(addForm.startSec, '元数据')
  ruleFormRef.value.validate(async (valid) => {
    if (valid) {
      addForm.startSec = addForm.startSec.join(',')
      addForm.zoneId = props.watershedId
      if (state.title == '新建区域') {
        addArea(addForm).then((res) => {
          if (res.code === 200) {
            handleClose()
            closeDialog()
            ElMessage.success('新建成功')
          }
        })
      } else {
        postModify(addForm).then((res) => {
          if (res.code == 200) {
            handleClose()
            closeDialog()
            ElMessage.success('修改成功')
          }
        })
      }
    } else {
      return
    }
  })
}
//获取所有预报断面
function getSecList() {
  getSectionTree({ zoneId: props.watershedId }).then((res) => {
    if (res.code === 200) {
      state.secList = res.data
      state.secList = [{ blkcd: -1, blknm: '无' }, ...res.data]
    }
  })
}
function handleOpenModal(item) {
  dialogVisible.value = true
  if (item) {
    setTimeout(() => {
      state.title = '修改区域'
      // addForm = item
      console.log(item, 'quyv ')
      acceptCalcZoneInfo(item.id)
    }, 100)
  } else {
    state.title = '新建区域'
  }
  getSecList()
}
// 查询区域详情
function acceptCalcZoneInfo(id) {
  getCalcZoneInfo({ zid: id }).then((res) => {
    if (res.code == 200) {
      addForm.calczName = res.data.calczName
      addForm.calczDesc = res.data.calczDesc
      addForm.startSec = res.data.startSec
      addForm.endSec = res.data.endSec
      addForm.id = res.data.id
      addForm.zoneId = res.data.zoneId

      addForm.startSec = addForm.startSec.split(',')
    }
  })
}
defineExpose({ handleOpenModal })
function handleClose() {
  dialogVisible.value = false
  ruleFormRef.value.resetFields()
}
</script>

<style lang="less" scoped>
.area-modal {
  .my-header {
    height: 35px;
    border-bottom: 2px solid #eee;
  }
}
</style>
